import React, {Component} from 'react';
import {message, Row, Col, Form, Select, Input, Button, DatePicker, Table, LocaleProvider, Modal} from 'antd';
import ajax from "../../util/AjaxUtil";
import qs from "qs";
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';

const emptyContent={
    thread_name: '',
    level: '',
    host: '',
    port: '',
    timestamp: '',
    logger_name: '',
    message: ''
};
class Log extends Component {

    constructor(props) {
        super(props);

        this.state = {
            param: {
                level: "ALL",
                timestamp: null,
                message: null
            },
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            pageTotal: 0,
            tableLoading: false,
            modal: {
                visible: false,
                content: emptyContent
            }
        }

    }

    render() {

        const {
            getFieldDecorator
        } = this.props.form;
        const {RangePicker} = DatePicker;

        const columns = [{
            title: '线程',
            dataIndex: 'thread_name',
            key: 'thread_name',
        }, {
            title: '等级',
            dataIndex: 'level',
            key: 'level',
        }, {
            title: '地址',
            dataIndex: 'host',
            key: 'host',
        }, {
            title: '端口',
            dataIndex: 'port',
            key: 'port',
        }, {
            title: '时间',
            dataIndex: '@timestamp',
            key: '@timestamp',
        }, {
            title: '日志名',
            dataIndex: 'logger_name',
            key: 'logger_name',
        }, {
            title: '消息',
            dataIndex: 'message',
            key: 'message',
        }];
        return (
            <div>
                <Row>
                    <Col span={24}>
                        <Form layout="inline" onSubmit={this.formSubmit.bind(this)}>
                            <Form.Item label={'级别'}>
                                {getFieldDecorator('level', {initialValue: this.state.param.level})(
                                    <Select style={{width: 120}}>
                                        <Select.Option value="ALL">ALL</Select.Option>
                                        <Select.Option value="DEBUG">DEBUG</Select.Option>
                                        <Select.Option value="INFO">INFO</Select.Option>
                                        <Select.Option value="WARN">WARN</Select.Option>
                                        <Select.Option value="ERROR">ERROR</Select.Option>
                                    </Select>
                                )}
                            </Form.Item>
                            <Form.Item
                                label="日期"
                                style={{marginBottom: 0}}
                            >
                                {getFieldDecorator('timestamp', {initialValue: this.state.param.timestamp})(
                                    <LocaleProvider locale={zh_CN}>
                                        <RangePicker
                                            format={'YYYY-MM-DD HH:mm:ss'}
                                            showTime={true}
                                        />
                                    </LocaleProvider>
                                )}
                            </Form.Item>
                            <Form.Item label="消息">
                                {getFieldDecorator('message', {initialValue: this.state.param.message})(
                                    <Input style={{width: 300}}/>
                                )}
                            </Form.Item>
                            <Button htmlType={'submit'}>搜索</Button>
                        </Form>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <Table
                            dataSource={this.state.tableData}
                            columns={columns}
                            loading={this.state.tableLoading}
                            pagination={{
                                pageSize: 10,
                                current: this.state.pageNum,
                                total: this.state.pageTotal
                            }}
                            onChange={this.pageChange.bind(this)}
                            onRow={(record) => {
                                return {
                                    onDoubleClick: this.rowDoubleClick.bind(this, record)
                                }
                            }}
                        />
                    </Col>
                </Row>
                <Modal title={"日志内容"}
                       cancelText={"关闭"}
                       okText={"确定"}
                       onOk={this.closeModal.bind(this)}
                       onCancel={this.closeModal.bind(this)}
                       visible={this.state.modal.visible}
                >
                    <Row>
                        <Col span={4}>线程</Col>
                        <Col span={20}>{this.state.modal.content.thread_name}</Col>
                    </Row>
                    <Row>
                        <Col span={4}>等级</Col>
                        <Col span={20}>{this.state.modal.content.level}</Col>
                    </Row>
                    <Row>
                        <Col span={4}>地址</Col>
                        <Col span={20}>{this.state.modal.content.host}</Col>
                    </Row>
                    <Row>
                        <Col span={4}>端口</Col>
                        <Col span={20}>{this.state.modal.content.port}</Col>
                    </Row>
                    <Row>
                        <Col span={4}>日志名</Col>
                        <Col span={20}>{this.state.modal.content.logger_name}</Col>
                    </Row>
                    <Row>
                        <Col span={4}>消息</Col>
                        <Col span={20}>{this.state.modal.content.message}</Col>
                    </Row>
                </Modal>
            </div>
        );
    }

    formSubmit(e) {
        e.preventDefault();
        this.findPage(this.state.pageNum, this.state.pageSize);
    }

    findPage(pageNum, pageSize) {
        let param = this.props.form.getFieldsValue();
        if (param.timestamp !== null && typeof(param.timestamp[0]) !== 'string') {
            param.timestamp[0] = param.timestamp[0].format("YYYY-MM-DD HH:mm:ss");
            param.timestamp[1] = param.timestamp[1].format("YYYY-MM-DD HH:mm:ss");
        }
        param.pageNum = pageNum;
        param.pageSize = pageSize;

        this.setState({
            tableLoading: true
        });
        ajax.post("/logCenter/log/search", qs.stringify(param))
            .then((result) => {
                if (result.data.result) {
                    this.setState({
                        tableData: result.data.data.content,
                        pageTotal: result.data.data.totalElements,
                        pageNum: pageNum
                    });
                } else {
                    message.error("查询错误！");
                }
                this.setState({
                    tableLoading: false
                });
            })
            .catch((error) => {
                message.error("网络请求失败！");
                this.setState({
                    tableLoading: false
                });
            });
    }

    pageChange(page, pageSize) {
        this.findPage(page.current, page.pageSize);
    }

    rowDoubleClick(record) {
        this.setState({
            modal: {
                visible: true,
                content: record
            }
        });
    }

    closeModal() {
        this.setState({
            modal: {
                visible: false,
                content: emptyContent
            }
        });
    }

}

export default Form.create()(Log);